<template>
  <div class="box">
    <!-- 页面卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="mulu" v-if="returnTop">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ subName }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ pathName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <span class="search_title_1">{{ search_title_1 }}</span>
        <input
          v-model="searchForm.input1"
          class="search_input_1"
          type="text"
          @keyup.enter="search"
        />
        <span v-if="search_title_2">
          <span class="search_title_2">{{ search_title_2 }}</span>
          <template>
            <el-select
              v-model="searchForm.input2"
              style="width: 205px"
              placeholder="请选择"
              @change="searchSelect"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </span>
        <el-button class="clear" @click="clear">清除</el-button>
        <el-button class="search" type="primary" @click="search"
          >搜索</el-button
        >
        <el-button
          v-if="returnTop"
          style="margin-left: 330px"
          icon="el-icon-back"
          type="text"
          @click="$router.go(-1)"
          >返回学科</el-button
        >
        <el-button
          style="float: right; height: 32px"
          class="el-icon-edit"
          type="success"
          @click="click"
          >{{ btnTitle }}</el-button
        >
      </div>
      <div class="alert" style="margin-buttom: 10px">
        <el-alert
          :title="`数据一共${counts}条`"
          type="info"
          :closable="false"
          show-icon
        >
        </el-alert>
      </div>
      <div class="table">
        <slot name="table"></slot>
      </div>
      <div class="pagination" style="margin-top: 20px; text-align: right">
        <el-pagination
          background
          @current-change="change"
          @size-change="sizeChange"
          :page-size="pageSize"
          :page-sizes="sizes"
          layout="prev, pager, next, sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { status } from "@/api/hmmm/constants";
export default {
  props: {
    btnTitle: {
      type: String,
    },
    search_title_1: {
      type: String,
    },
    search_title_2: {
      type: String,
    },
    counts: {
      type: Number,
      default: 0,
    },
    pageSize: {
      type: Number,
    },
    returnTop: {
      type: Boolean,
    },
    subName: {
      type: String,
    },
    pathName: {
      type: String,
    },
  },
  data() {
    return {
      searchForm: {
        input1: "",
        input2: "",
      },
      sizes: [5, 10, 20, 50],
      status,
    };
  },

  watch: {
    subName(value, oldValue) {
      console.log(value);
      // return value
    },
    pathName(value, oldValue) {
      console.log(value);
    },
  },
  methods: {
    clear() {
      this.searchForm = {};
    },
    change(val) {
      this.$emit("currentPage", val);
    },
    sizeChange(size) {
      this.$emit("sizeChange", size);
    },
    // 点击新增学科按钮
    click() {
      this.$emit("addSubBtn");
    },
    // 搜索按钮
    search() {
      this.$emit("search", this.searchForm);
    },
    // 搜索的下拉框数据
    searchSelect(value) {
      // console.log(value)
      this.$emit("searchSelect", value);
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  margin: 10px;
}
.search_input_1 {
  height: 32px;
  width: 190px;
  padding: 0 10px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
.search_title_2 {
  margin: 0 5px 0 30px;
}
.clear {
  height: 32px;
  margin-left: 10px;
}
.search {
  height: 32px;
}
.search_title_1,
.search_title_2 {
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  padding: 0 15px;
}

::v-deep .el-card__body {
  padding-top: 0 !important;
}
::v-deep .el-card__header {
  border-bottom: none;
}
::v-deep .el-input__inner {
  height: 32px !important;
}
.mulu {
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}
</style>
